<template>
  <div>
    <van-nav-bar left-arrow>
      <template #title>
        <van-cell-group>
          <van-field
            v-model="value"
            label="上海▼ │"
            placeholder="请输入小区或地址"
            label-width="1rem"
          />
        </van-cell-group>
      </template>
      <template #right>
        <van-icon name="location-o" size="18" />
      </template>
    </van-nav-bar>
    <van-tabs v-model="active" sticky animated>
      <van-tab title="区域 ▾ "></van-tab>
      <van-tab title="方式 ▾ "></van-tab>
      <van-tab title="租金 ▾ "></van-tab>
      <van-tab title="筛选 ▾ "></van-tab>
    </van-tabs>
    <van-cell-group>
      <van-cell v-for="(item, index) in houseList" :key="index">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-image
            width="100"
            height="100"
            :src="`http://liufusong.top:8080` + item.houseImg"
          />
          <!-- <van-icon name="search" class="search-icon" /> -->
          <div class="rightbox">
            <span class="s1">{{ item.title }}</span>
            <div class="s2">{{ item.desc }}</div>
            <span class="s3">近地铁</span>
            <div class="s4">{{item.price}}<span> 元/月</span></div>
          </div>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { houseApi } from '@/api'
// import houseList from './houseList.vue'
export default {
  data () {
    return {
      value: '',
      active: 0,
      houseList: []
    }
  },
  async created () {
    const res = await houseApi()
    // console.log(res.data.body.list)
    this.houseList = res.data.body.list
    console.log(this.houseList)
  }
  // components: {
  //   houseList
  // }
}
</script>

<style scoped>
.van-cell {
  padding: 0;
  line-height: 0.94rem;
}
/* span{
  padding-top: -100px;
} */
.van-image__img {
  margin: 5px;
}
.rightbox {
  margin-left: 10px;
}
.s1 {
  font-size: 15px;
  font-weight: bold;
}
.s2 {
  font-size: 10px;
  color: #afb2b3;
  margin-top: -10px;
}
.s3 {
  color: #50c6d3;
  background-color: #e1f5f8;
  font-size: 10px;
  height: 20px;
  width: 50px;
  line-height: 20px;
  display: block;
  padding: 3px;
  text-align: center;
}
.s4{
  color: #fa5741;
  font-size: 18px;
  font-weight: bold;
}
.s4 span {
  font-size: 10px;
}
</style>
